<template>
	<div class="image-list-box" v-if="config.imageItems && config.imageItems.length > 0">
		<div :class="boxStyle"
			:style="{padding: (config.verticalPadding * 2) + 'rpx ' + (config.horizontalPadding * 2) + 'rpx', backgroundColor: config.backgroundColor}">
			<van-row v-for="(row, i) in rows" :key="i">
				<van-col v-for="(img, j) in row" :key="j" :span="colSpan">
					<div @click="img.href ? $router.push(img.href) : ''">
						<image show-menu-by-longpress mode="widthFix" sytle="display: block;"
							:src="img.url" />
					</div>
				</van-col>
			</van-row>
		</div>
	</div>
</template>

<script>
	export default {
		name: "image-list",
		props: {
			config: {
				type: Object,
				required: true
			}
		},
		computed: {
			// 行数
			rowCount() {
				return Math.ceil(this.config.imageItems.length / this.config.columns);
			},
			// 每一列占用的空间
			colSpan() {
				return Math.floor(24 / this.config.columns);
			},
			// 锁定图片宽度
			imageWidth() {
				return (373 - this.config.horizontalPadding * 2) / this.config.columns;
			},
			// 行
			rows() {
				let rows = new Array(this.rowCount)
					.fill(null)
					.map((item, index) => index)
					.map(item => {
						let s = item * this.config.columns,
							e = (item + 1) * this.config.columns;
						if (e > this.config.imageItems.length) {
							e = this.config.imageItems.length;
						}
						return this.config.imageItems.slice(s, e);
					});
				return rows;
			},
			boxStyle() {
				return {
					paddingLeft: `${this.config.horizontalPadding}rpx`,
					paddingRight: `${this.config.horizontalPadding}rpx`,
					paddingTop: `${this.config.verticalPadding}rpx`,
					paddingBottom: `${this.config.verticalPadding}rpx`,
					backgroundColor: this.config.backgroundColor
				};
			}
		}
	};
</script>

<style scoped>
	.swiper-item {
		height: 100%;
	}

	.image-list-box {
		width: auto;
		/* margin-top: 5rpx;
  padding: 10rpx 30rpx; */
		background: #ffffff;
	}

	.image-list-box image {
		display: block;
		width: 100%;
	}
</style>
